<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>这是title的内容</title>
    <style>
        
    </style>
</head>
<body>
    <div id="box">1</div>
    <div id="box">2</div>
    <div id="box">3</div>
    <div class="cont">4</div>
    <div class="cont">5</div>
    <div class="cont">6</div>
    <div class="msg">
        <em>a</em>
        <em>b</em>
        <div class="xbox">
            <h3>标题1</h3>
            <h3>标题2</h3>
            <h3>标题3</h3>
            <h3>标题4</h3>
            <div>
                <h3>这是孙子</h3>
            </div>
        </div>
        <h3>标题5</h3>
        <h3>标题6</h3>
    </div>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="text" name="password">
    <input type="text" name="email">
</body>
<script>

    // // id：失明特性，id具有唯一性，就算有多个，也只选一个
    // var oBox = document.getElementById("box");
    // console.log(typeof oBox);
    // console.log(oBox);
    // console.log(oBox.innerHTML);

    // // class：选择到的数据必然是数组的形式，哪怕没有符合的元素
    // var aCont = document.getElementsByClassName("cont");
    // console.log(typeof aCont);
    // console.log(aCont);
    // console.log(aCont.innerHTML);
    // console.log(aCont[0].innerHTML);

    // // tagName：选择到的数据必然是数组的形式，哪怕没有符合的元素
    // var aSpan = document.getElementsByTagName("span");
    // console.log(aSpan);

    // // name：选择到的数据必然是数组的形式，哪怕没有符合的元素
    // var aPw = document.getElementsByName("password");
    // console.log(aPw);


    // ES5新增的选择器
    // 参数：可以支持css选择器的写法
    // querySelector：哪怕有多个，也只选一个
    // var ele = document.querySelector( "#box" );
    // var ele = document.querySelector( ".cont" );
    // var ele = document.querySelector( "span" );
    // var ele = document.querySelector( "input[name=password]" );
    // console.log(ele);

    // querySelectorAll：哪怕没有，选择到的也是数组，注意解析
    // var eles = document.querySelectorAll( "#box" );
    // var eles = document.querySelectorAll( ".cont" );
    // var eles = document.querySelectorAll( ".box" );
    // var eles = document.querySelectorAll( "input[name=password]" );
    // var eles = document.querySelectorAll( "#box,.cont,span" );
    // var eles = document.querySelectorAll( ".msg h3" );
    // var eles = document.querySelectorAll( ".msg>h3" );
    // var eles = document.querySelectorAll( ".msg+span" );
    // var eles = document.querySelectorAll( ".msg~span" );
    // var eles = document.querySelectorAll( "*" );
    // console.log(eles);

    // ...


    // ==============
    var oXbox = document.querySelector(".xbox");


    // 间接选择

    // 所有子元素选择器
    console.log(oXbox.children);
    // 第一个子元素
    console.log(oXbox.firstElementChild);
    // 最后一个子元素
    console.log(oXbox.lastElementChild);
    // 父元素
    console.log(oXbox.parentNode);
    // 上一个兄弟元素
    console.log(oXbox.previousElementSibling);
    // 下一个兄弟元素
    console.log(oXbox.nextElementSibling);
    // 根节点
    console.log(oXbox.ownerDocument);
    // 根节点
    console.log(document);
    
    console.log(document === oXbox.ownerDocument);

    // ===============

    // 特殊选择器

    // body标签选择器
    console.log(document.body);
    // head标签选择器
    console.log(document.head);
    // html标签选择器
    console.log(document.documentElement);
    
    console.log(document.documentElement === document.querySelector("html"));

    // ===========

    // 不是选择器，是一个属性
    console.log(document.title);
    document.title = "hello";
</script>
</html>